<template>
 <div class="login">
   <!-- 这是login页面 -->

      <el-form status-icon ref="form"   :rules="rules" :model="form" label-width="80px">
        <img class="meinv" src="../assets/avatar.jpg" alt="">
      <el-form-item   label="用户名：" label-width="80px" prop="username">
        <el-input @keyup.enter.native="login" placeholder="请输入用户名" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item   label="密码："  prop="password">
        <el-input @keyup.enter.native="login" placeholder="请输入密码" type='password' v-model="form.password"></el-input>
      </el-form-item>
       <el-form-item>
         <el-button  @click="login" type='primary' class="loginbtn">登录</el-button>
         <el-button @click='set'>重置</el-button>
      </el-form-item>
    </el-form>
 </div>
</template>

<script>

export default {
  data () {
    return {
      form: {
        uesername: '',
        password: ''
      },
      rules: {
        // required: true 为必填项
        // message 提示消息
        // trigger: blur 失去焦点触发校验   change 修改时就触发
        // min: 最小长度,  max: 最大长度
        username: [
          { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
          { min: 3, max: 12, message: '用户名长度必须是3-12位', trigger: ['change', 'blur'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { min: 3, max: 12, message: '密码长度必须是3-12位', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    set () {
      this.$refs.form.resetFields()
    },
    async login () {
      try {
        await this.$refs.form.validate()

        const res = await this.$axios.post('login', this.form)

        const { meta, data } = res
        if (meta.status === 200) {
          // 登录成功, 跳转首页
          // console.log(res.data.meta.msg)
          this.$message({
            message: meta.msg,
            type: 'success',
            duration: 2000
          })

          localStorage.setItem('token', data.token)

          this.$router.push('./index')
        } else {
          // 给用户提示, 登录失败
          this.$message({
            showClose: true,
            message: meta.msg,
            type: 'error',
            duration: 2000
          })
        }
      } catch (err) {

      }

      // 获取到 el-form组件, 调用校验方法
      // 参数1: 是否校验成功  boolean
      // 参数2: 错误的字段信息
      // this.$refs.form.validate((isValid) => {
      //   if (!isValid) return
      //   // 校验成功
      //   // console.log('发送登录ajax请求')
      //   this.$axios.post('login', this.form)
      //     .then(res => {
      //     // console.log(res.data)
      //       const { meta, data } = res
      //       if (meta.status === 200) {
      //       // 登录成功, 跳转首页
      //         // console.log(res.data.meta.msg)
      //         this.$message({
      //           message: meta.msg,
      //           type: 'success',
      //           duration: 2000
      //         })

      //         localStorage.setItem('token', data.token)

      //         this.$router.push('./index')
      //       } else {
      //       // 给用户提示, 登录失败
      //         this.$message({
      //           showClose: true,
      //           message: meta.msg,
      //           type: 'error',
      //           duration: 2000
      //         })
      //       }
      //     })
      // })
    }
  }
}
</script>

<style lang=less>
.login{
  background-color: #2d434c;
  width: 100%;
  height: 100%;
 overflow: hidden;

  .el-form{
    width: 400px;
    padding: 20px;
    padding-top: 80px;
    margin: 0 auto;
    margin-top: 200px;
    border-radius: 20px;
    background-color: #fff;
   position: relative;

  }
  .loginbtn{
    margin-right: 70px;
  }
  .meinv{
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -70px;
    border-radius: 50%;
    border: 3px solid #fff;
  }
}

</style>
